/**
 * 目标1：渲染图书列表
 *  1.1 获取数据
 *  1.2 渲染数据
 */
// 封装-获取 并渲染图书列表函数
// function getBooksList() {
//   // 1.1 获取数据
//   axios({
//     url: 'http://hmajax.itheima.net/api/books',
//     params: {
//       creator: '老张'
//     }
//   }).then(result => {
//     console.log(result.data)
//   })
// }
// getBooksList()



const getBooksList = async () => {
  // 1.1 获取数据
  const response = await axios.get('http://hmajax.itheima.net/api/books', {
    params: {
      // 外号： 获取对应数据
      creator: 'hha'
    }
  })
  const bookList = response.data.data
  console.log(bookList)

  // 1.2 渲染数据
  const htmlStr = bookList.map((item, index) => {
    return `
      <tr>
        <td>${index}</td>
        <td>${item.bookname}</td>
        <td>${item.author}</td>
        <td>${item.publisher}</td>
        <td>
          <span class="del" data-id="${item.id}">删除</span>
          <span class="edit">编辑</span>
        </td>
      </tr>
    `
  }).join('')

  document.querySelector('.list').innerHTML = htmlStr

}

getBooksList()

// 提交到服务器
const addBook = async (newBook) => {
  const response = await axios.post('http://hmajax.itheima.net/api/books', newBook)
  if (response) console.log('新增成功')
}


// 新增图书
// 创建一个弹框对象
const addModalDom = document.querySelector('.add-modal')
const addModal = new bootstrap.Modal(addModalDom)
document.querySelector('.add-btn').addEventListener('click', async () => {
  // 收集表单，并提交到服务器
  const addForm = document.querySelector('.add-form')
  // serialize插件 它能把 HTML 表单序列化成对象或字符串，非常方便。
  // hash:true -> "name=小智&age=20" 转换成 { name: "小智", age: "20" }
  // empty: true -> 加了 empty: true，即使表单项为空，也会把该键以空字符串 "" 的形式序列化进去。
  const bookObj = serialize(addForm, { hash: true, empty: true })
  console.log(bookObj) // {bookname: '哈哈', author: '流哈哈', publisher: '武汉传媒学院'}

  // 提交到服务器
  // axios({
  //   url: 'http://hmajax.itheima.net/api/books',
  //   method: 'POST',
  //   data: {
  //     ...bookObj,
  //     creator: '老张'
  //   }
  // }).then(result => {
  //   console.log(result)
  //   // 2.3 添加成功后， 重新请求并渲染图书列表
  //   getBooksList()
  // })

  const response = await axios.post('http://hmajax.itheima.net/api/books', {
    ...bookObj,
    creator: 'hha'
  })
  console.log(response)
  await getBooksList()


  addModal.hide()
})



// 删除图书
// 3.1 删除元素 -> (事件委托)
document.querySelector('.list').addEventListener('click', e => {
  // 获取触发事件目标元素
  // console.log(e.target)
  // 判断点击的是删除元素 contains常用来判断一个元素的某个 class 类名 是否存在。
  if (e.target.classList.contains('del')) {
    console.log(e.target.classList)
    console.log('点击删除元素')
    // let index = Array.from(document.querySelectorAll('.del')).indexOf(e.target)

    // const demo = async () => {
    //   const response = await axios.get('http://hmajax.itheima.net/api/books', {
    //     params: {
    //       creator: 'hha'
    //     }
    //   })
    //   console.log(response.data.data)
    //   let id = response.data.data[index].id
    //   console.log(id)

    //   // 调用删除接口
    //   await axios.delete(`http://hmajax.itheima.net/api/books/${id}`)
    //   await getBooksList()
    // }
    // demo()

    // 获取图书的id
    // parentNode 上面一个父节点 
    // closest('.') 指定父节点
    const id = e.target.dataset.id
    const demo = async () => {
      await axios.delete(`http://hmajax.itheima.net/api/books/${id}`)
      await getBooksList()
    }
    demo()

  }
})

// 目标4 编辑图书
const editDom = document.querySelector('.edit-modal')
const editModal = new bootstrap.Modal(editDom)
document.querySelector('.list').addEventListener('click', async e => {
  // 为什么非要这么写呢 就是因为页面存在多个edit标签， 你就必须要用querySelectorAll.forEach()来进行遍历， 那么这种查找就不需要进行遍历
  if (e.target.classList.contains('edit')) {
    // console.log('一定是编辑')
    editModal.show()
    // console.log('e', e.target)
    // 点击编辑就要拿到测试的id 原生js找任意兄弟节点属性
    const theId = e.target.parentNode.querySelector('.del').dataset.id
    console.log(theId)
    // axios来获取详细数据
    const response = await axios.get(`http://hmajax.itheima.net/api/books/${theId}`)
    const bookObj = response.data.data
    // document.querySelector('.edit-form .bookname').value = bookObj.bookname
    // document.querySelector('.edit-form .author').value = bookObj.author
    // document.querySelector('.edit-form .publisher').value = bookObj.publisher

    // 数据对象“属性” 和 标签“类名”一致
    // 遍历数据对象， 使用属性去获得对应的标签， 快速赋值
    const keys = Object.keys(bookObj) // ['id', 'bookname', 'author', 'publisher']
    keys.forEach(key => {
      // 通过变量名 动态 访问对象属性，必须用中括号 []，不能用点语法。
      document.querySelector(`.edit-form .${key}`).value = bookObj[key]
    })
  }
})

// 点击修改按钮
document.querySelector('.edit-btn').addEventListener('click', async () => {
  // 提交保存修改 并刷新列表
  const editForm = document.querySelector('.edit-form')
  // 进行解构
  const { id, bookname, author, publisher } = serialize(editForm, { hash: true, empty: true })

  const response = await axios.put(`http://hmajax.itheima.net/api/books/${id}`, {
    bookname,
    author,
    publisher,
    creator: 'hha'
  })

  // 修改成功 重新渲染列表
  getBooksList()

  editModal.hide()
})
